<template>
    <div>
        <div class="container">
            <h1>用户信息</h1>
            <el-divider></el-divider>
            <div class="userTable">
                <el-table
                    :data="userList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    style="width:100%"
                    stripe
                >
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                    <el-table-column label="用户名" prop="user_name"></el-table-column>
                    <el-table-column label="电话号码" prop="user_phone"></el-table-column>
                    <el-table-column label="电子邮箱" prop="user_email"></el-table-column>
                    <el-table-column label="性别" prop="user_sex"></el-table-column>
                    <el-table-column label="地址" prop="user_address"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 15, 30, 45, 60, 75]"
                :page-size="pagesize"   
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left:35%; margin-top: 20px"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Update',
    data() {
        return {
            //总数
            length: 0, //初始页
            currentPage: 1, //初始页大小
            pagesize: 10,
            userList: [
                {
                    user_id: '',
                    user_name: '',
                    user_phone: '',
                    user_email: '',
                    user_sex: '',
                    user_address: ''
                }
            ]
        };
    },
    methods: {
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        }, // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        getData() {
            let _this = this;
            this.$axios({
                method: 'get',
                url: 'user/query-all'
            }).then(res => {
                if (res.data.code == 1) {
                    this.userList = res.data.result;
                    this.length = this.userList.length;
                }
            });
        }
    },
    created() {
        this.getData();
    }
};
</script>
<style>
</style>